<template>
    <div class="learningGardencontainer">
        <!-- 学习园地管理 -->
        <div class="learningGardenMentMain">
            <el-row>
                <el-col :span="24">
                    <el-form
                        :inline="true"
                        :model="formData"
                        class="demo-form-inline formData_form_inline"
                        size="small"
                    >
                        <el-form-item label="坐席工号">
                            <el-input v-model="formData.agentId" placeholder="请输入坐席工号"></el-input>
                        </el-form-item>
                        <el-form-item label="坐席姓名">
                            <el-input v-model="formData.agentName" placeholder="请输入坐席姓名"></el-input>
                        </el-form-item>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            @click="hanlesearch"
                            :loading="searchLoading"
                            class="searchBtn"
                        >查询</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-refresh-right"
                            @click="handleReset"
                            :loading="resetLoading"
                            class="resetBtn"
                        >重置</el-button>
                    </el-form>
                    <div style="margin-bottom: 16px;">
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-circle-plus-outline"
                            @click="hanlePush"
                        >新增</el-button>
                    </div>
                    <el-table
                        :data="tableData"
                        width="100%"
                        border
                        highlight-current-row
                        stripe
                        class="heard-bg"
                    >
                        <el-table-column label="坐席工号" prop="agentId"></el-table-column>
                        <el-table-column label="坐席姓名" prop="agentName"></el-table-column>
                        <el-table-column label="学习类型" prop="learningType">
                            <template slot-scope="scope">
                                <span v-if="scope.row.learningType === '0'">品质事件</span>
                                <span v-else-if="scope.row.learningType === '1'">优秀录音</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="业务类型" prop="busType"></el-table-column>
                        <el-table-column label="创建时间" prop="createTime"></el-table-column>
                        <el-table-column label="操作" width="250">
                            <template slot-scope="scope">
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    title="编辑"
                                    circle
                                    @click="handleEdit(scope.row)"
                                />
                                <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    title="删除"
                                    circle
                                    @click="handleDelete(scope.row)"
                                />
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="pagination">
                        <Pagination
                            :hanleChangeCurrentPage="hanleChangeCurrentPage"
                            :handleChangeSize="handleChangeSize"
                            :currentPage="currentPage"
                            :pageSize="pageSize"
                            :total="total"
                        />
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--添加/编辑-->
        <el-dialog
            v-drag
            :visible.sync="Show"
            :close-on-click-modal="false"
            append-to-body
            center
            width="500px"
            @close="cancelClick"
        >
            <div slot="title">{{EditTitle}}</div>
            <el-form
                :model="Edit"
                label-position="right"
                ref="Edit"
                label-width="110px"
                :rules="formRules"
                size="small"
            >
                <el-form-item label="坐席工号" prop="agentId">
                    <el-input v-model="Edit.agentId" placeholder="请输入坐席工号" style="width: 250px" />
                </el-form-item>
                <el-form-item label="坐席姓名" prop="agentName">
                    <el-input v-model="Edit.agentName" placeholder="请输入坐席姓名" style="width: 250px" />
                </el-form-item>
                <el-form-item label="学习类型" prop="learningType">
                    <!--<el-input v-model="Edit.learningType" placeholder="请输入学习类型" style="width: 200px"/>-->
                    <el-radio label="1" v-model="Edit.learningType" border>优秀录音</el-radio>
                    <el-radio label="0" v-model="Edit.learningType" border>品质事件</el-radio>
                </el-form-item>
                <el-form-item label="业务类型" prop="busType">
                    <el-input v-model="Edit.busType" placeholder="请输入业务类型" style="width: 250px" />
                </el-form-item>
                <el-form-item label="录音文件" prop="networkPath">
                    <!--<el-input v-model="Edit.networkPath" placeholder="请输入"/>-->
                    <input type="file" ref="input" id="fileupload" @input="upload" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-circle-check"
                    @click="submitEdit"
                    class="submitBtn"
                >确定</el-button>
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    class="cancelBtn"
                    @click="cancelClick"
                >取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination/Pagination.vue';

export default {
    name: 'learningGarden',
    components: {
        Pagination,
    },
    data() {
        return {
            formData: {
                agentId: '',
                agentName: '',
            },
            pageLength: 0,
            // 新增字段
            Edit: {
                agentId: '',
                agentName: '',
                learningType: '',
                busType: '',
                networkPath: '',
            },
            EditTitle: '',
            sendTitle: '',
            Show: false,
            sendShow: false,
            // 搜索loading
            searchLoading: false,
            // 重置loading
            resetLoading: false,
            formRules: {
                agentId: [
                    { required: true, message: '请输入坐席工号', trigger: 'blur' },
                ],
                agentName: [
                    { required: true, message: '请输入坐席姓名', trigger: 'blur' },
                ],
                learningType: [
                    { required: true, message: '请输入学习类型', trigger: 'blur' },
                ],
                busType: [
                    { required: true, message: '请输入业务类型', trigger: 'blur' },
                ],
            },
            // 当前页码
            currentPage: 1,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 当前页码
            currentPageDetail: 1,
            // 页码大小
            pageSizeDetail: 10,
            // 总数
            totalDetail: 0,
            // 表格内容
            tableData: [],
            files: {},
        };
    },
    mounted() {
        this.getInitData(this.formData);
    },
    filters: {
        filterValue(val) {
            return val.replace(/<[^>]+>/g, '');
        },
    },
    methods: {
        // 获取荣誉榜数据
        getInitData(form) {
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
            };
            params = Object.assign({}, params, form);
            this.$post.learningGarden.pageLearningGarden(params)
                .then((res) => {
                    if (res.data.success) {
                        this.tableData = res.data.content.records;
                        this.total = res.data.content.total;
                    }
                });
        },
        // 点击搜索
        hanlesearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 点击重置
        handleReset() {
            this.formData = {
                agentId: '',
                agentName: '',
            };
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 点击新增
        hanlePush() {
            // 解决一进来就进行表单验证问题
            this.EditTitle = '添加学习园地信息';
            this.Edit = {
                agentId: '',
                agentName: '',
                learningType: '',
                busType: '',
                networkPath: '',
            };
            this.files = {};
            this.pageLength = 0;
            this.Show = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 点击编辑
        handleEdit(row) {
            this.files = {};
            this.EditTitle = '编辑学习园地信息';
            this.Edit = JSON.parse(JSON.stringify(row));
            this.Show = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 单个删除
        handleDelete(row) {
            this.$confirm('确认删除该学习园地信息？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.learningGarden.deleteLearningGarden({ id: row.id })
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                if (this.tableData.length === 1) {
                                    this.currentPage = this.currentPage - 1;
                                }
                                this.getInitData(this.formData);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                });
        },
        // 新增点击确定按钮
        submitEdit() {
            if (!this.files.name) {
                this.$message.warning('请选择需要上传的文件！');
                return;
            }
            const data = new FormData();
            data.append('file', this.files);
            this.$post.fileUpload.uploadMultipartFile(data)
                .then((resFile) => {
                    if (resFile.data.success) {
                        if (resFile.data.content.code === '000000') {
                            this.Edit.networkPath = resFile.data.content.networkPath;
                            if (this.Edit.id) {
                                // 编辑
                                this.$refs.Edit.validate((valid) => {
                                    console.log(valid);
                                    if (valid) {
                                        this.$post.learningGarden.updateLearningGarden(this.Edit)
                                            .then((res) => {
                                                if (res.data.success) {
                                                    this.$message.success('修改成功！');
                                                    const obj = document.getElementById('fileupload');
                                                    obj.value = '';
                                                    this.getInitData(this.formData);
                                                    this.Show = false;
                                                } else {
                                                    this.deleteFile(resFile.data.content.fileName);
                                                    this.$message.error(res.data.msg);
                                                }
                                            });
                                    } else {
                                        this.deleteFile(resFile.data.content.fileName);
                                        this.$message.warning('请完成表单填写！');
                                    }
                                });
                            } else {
                                // 添加
                                this.$refs.Edit.validate((valid) => {
                                    if (valid) {
                                        this.$post.learningGarden.addLearningGarden(this.Edit)
                                            .then((res) => {
                                                if (res.data.success) {
                                                    this.$message.success('添加成功！');
                                                    const obj = document.getElementById('fileupload');
                                                    obj.value = '';
                                                    this.getInitData(this.formData);
                                                    this.Show = false;
                                                } else {
                                                    this.deleteFile(resFile.data.content.fileName);
                                                    this.$message.error(res.data.msg);
                                                }
                                            });
                                    } else {
                                        this.deleteFile(resFile.data.content.fileName);
                                        this.$message.warning('请完成表单填写！');
                                    }
                                });
                            }
                        } else {
                            this.$message.error(resFile.data.content.msg);
                        }
                    } else {
                        this.$message.error(resFile.data.msg);
                    }
                });
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData(this.formData);
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData(this.formData);
        },
        upload() {
            this.files = this.$refs.input.files[0];
        },
        deleteFile(fileId) {
            this.$post.fileUpload.deleteOneFile({ id: fileId })
                .then((res) => {
                    if (res.data.success) {
                        // this.$message.success('删除成功！');
                        if (this.tableData.length === 1) {
                            this.currentPage = this.currentPage - 1;
                        }
                        this.getInitData(this.formData);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
        },
        // 取消
        cancelClick() {
            const obj = document.getElementById('fileupload');
            obj.value = '';
            this.Show = false;
        },
    },
};
</script>

<style  lang="scss">
.editor .ql-container {
    height: 280px;
}
.learningGardencontainer {
    width: 100%;
    height: 100%;
    #grid-content /deep/ .side-bar-scrollbar-wrap {
        max-height: 500px;
        min-height: 200px;
    }
    .rolemanageMentHeader {
        height: 68px;
        background: #fff;
        border-radius: 5px;
        text-align: left;
        font-size: 14px;
        line-height: 68px;
        padding: 0 12px;
        .el-form--inline .el-form-item__content {
            vertical-align: middle;
        }
        .el-button {
            i {
                font-weight: bolder;
                text-align: left;
                font-size: 16px;
                margin-left: -6px;
            }
        }
    }

    .learningGardenMentMain {
        width: 100%;
        background: #fff;
        margin: 0 0 15px;
        // border-radius:5px;
        padding: 20px;
        box-sizing: border-box;
        text-align: left;

        .tableTitle {
            width: 100%;
            height: 48px;
            border: 1px solid #eee;
            border-bottom: none;
            line-height: 48px;
            margin-top: 20px;
            color: #666;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
    }
}
</style>
